<template>
  <div class="home">
    <Input></Input>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in swiper" :key="image.id">
        <img :src="`http://liufusong.top:8080${image.imgSrc}`" />
      </van-swipe-item>
    </van-swipe>
    <!-- 图标 #00ae66-->
    <div class="iconbox">
      <van-grid :border="false">
        <van-grid-item to="/layout/list">
          <van-icon name="wap-home-o" color="#00ae66" size="40" />
          <p>整租</p>
        </van-grid-item>
        <van-grid-item to="/layout/list">
          <van-icon name="friends-o" color="#00ae66" size="40" />
          <p>合租</p>
        </van-grid-item>
        <van-grid-item to="/map">
          <van-icon name="location-o" color="#00ae66" size="40" />
          <p>地图找房</p>
        </van-grid-item>
        <van-grid-item to="/login">
          <van-icon name="balance-list-o" color="#00ae66" size="40" />
          <p>去出租</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 租房小组 -->
    <div class="group">
      <h3 class="group-title">
        租房小组
        <span class="more">更多</span>
      </h3>
      <!-- 列表 direction="horizontal"-->
      <div class="groupbox">
        <van-grid center direction="horizontal" :column-num="2" :gutter="10">
          <van-grid-item class="grounpItem" v-for="g in groups" :key="g.id">
            <img
              style="width: 50%"
              :src="`http://liufusong.top:8080${g.imgSrc}`"
              alt=""
            />
            <div style="margin-right: 3px">
              <p style="font-size: 14px">{{ g.title }}</p>
              <p style="font-size: 14px">{{ g.desc }}</p>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import Input from "@/components/Input";
import { swiperAPI, groupsAPI } from "@/api";

export default {
  components: { Input },
  data() {
    return {
      swiper: [],
      groups: [],
    };
  },
  mounted() {
    this.getSwiperAPI(), this.getGroupsAPI();
  },
  methods: {
    async getSwiperAPI() {
      try {
        const res = await swiperAPI();
        // console.log(res);
        // console.log(res.data.body);
        this.swiper = res.data.body;
      } catch (e) {
        console.log(e);
      }
    },
    // 获取租房小组信息
    async getGroupsAPI() {
      try {
        const res = await groupsAPI({
          area: "AREA|88cff55c-aaa4-e2e0",
        });
        // console.log(res.data.body);
        this.groups = res.data.body;
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style scoped>
body {
  background: #f6f5f6;
}
.home {
  position: relative;
}
.my-swipe {
  width: 100%;
  height: 212px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  /* background-color: #39a9ed; */
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.iconbox p {
  margin-top: 13px;
  font-size: 14px;
  color: #333;
}
.home .group {
  overflow: hidden;
  padding: 0 10px;
}
.home .group .group-title {
  position: relative;
  margin: 15px 0 15px 10px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
}
.home .group .group-title .more {
  color: #787d82;
  position: absolute;
  right: 0;
  font-size: 14px;
  font-weight: 400;
}
</style>
